<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to="/home/300">home</router-link>
        <router-link to="/me">me</router-link>
        <router-view></router-view>
    </div>
</body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
    const home={
        template:`
            <div>
                <span>我是hmoe页</span>    
            </div>
        
        `,
        mounted(){
            console.log(this.$route)
        }
    }
    const me={
        template:`
            <div>
                <span>我是me页</span>
            </div>
        
        `,
    }
    const router=new VueRouter({
        routes:[
            {
                path:'/home/:a',
                component:home
            },
            {
                path:'/me',
                component:me
            }

        ]
    })
    const vm=new Vue({
        el:'#app',
        router

    })
</script>
</html>